<template>
    <div id="demo">
        <children msg="不通过props接受的值" @click="onclick"></children>
        <button @click="test">父组件按钮</button>

        <grandChild></grandChild>
        <button @click="injectDataChange">injectDataChange++</button>
    </div>
</template>

<script>
    import children from "./children"
    import grandChild from "./grandChild";
    export default {
        provide(){
            const _this = this
            return{
                foo(){
                    return _this.injectData
                }
            }
        },
        data() {
            return {
                injectData: 1
            }
        },
        components: {
            children,grandChild
        },
        methods: {
            injectDataChange(){
                this.injectData+=1
                console.log(this.injectData)
            },
            test() {
                this.$children[0].test()
            },
            onclick() {
                console.log("声明在老爹的函数", this)
            }
        }
    }
</script>

<style>

</style>